import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { getCameraItemDeduct, filterMonth } from '../lib/publicMethod'
import { ICameraData } from '../interface/ICameraData'

interface IProps {
  data: ICameraData[]
}
export default function CameraProportionChange(props: IProps) {
  const data = props.data
  const el = useRef<HTMLDivElement | null>(null)
  const ec = useRef<echarts.ECharts | null>(null)
  useEffect(() => {
    ec.current = echarts.init(el.current as HTMLDivElement)
  }, [])
  useEffect(() => {
    //扣分项变化趋势
    const itemDeductAveByMonth = [
      getCameraItemDeduct(filterMonth(data, '七月')).ave,
      getCameraItemDeduct(filterMonth(data, '八月')).ave,
      getCameraItemDeduct(filterMonth(data, '九月')).ave,
      getCameraItemDeduct(filterMonth(data, '十月')).ave,
      getCameraItemDeduct(filterMonth(data, '十一月')).ave,
      getCameraItemDeduct(filterMonth(data, '十二月')).ave,
    ]
    const teacherArr: number[] = []
    const shareArr: number[] = []
    const comeLateArr: number[] = []
    const leaveEarlyArr: number[] = []
    const seriousArr: number[] = []
    const otherArr: number[] = []
    for (let i = 0; i < itemDeductAveByMonth.length; i++) {
      teacherArr.push(itemDeductAveByMonth[i][0])
      shareArr.push(itemDeductAveByMonth[i][1])
      comeLateArr.push(itemDeductAveByMonth[i][2])
      leaveEarlyArr.push(itemDeductAveByMonth[i][3])
      seriousArr.push(itemDeductAveByMonth[i][4])
      otherArr.push(itemDeductAveByMonth[i][5])
    }
    (ec.current as echarts.ECharts).setOption({
      legend: {
        data: ['讲师在班状态', '课前分享情况', '学员迟到', '学员早退', '学员严重违纪', '学员其他违纪']
      },
      xAxis: {
        data: ['七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        max: 30
      },
      series: [
        {
          name: '讲师在班状态',
          type: 'bar',
          data: teacherArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '课前分享情况',
          type: 'bar',
          data: shareArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '学员迟到',
          type: 'bar',
          data: comeLateArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '学员早退',
          type: 'bar',
          data: leaveEarlyArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '学员严重违纪',
          type: 'bar',
          data: seriousArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '学员其他违纪',
          type: 'bar',
          data: otherArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        }
      ]
    })
  }, [data])
  return (
    <div className="show" ref={el}></div>
  )
}
